<template>
  <div class="app-container">
      <div class="filter-container">
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" @click="handleUpdate(null)">添加</el-button>        
      </div>
      <div>
      <tree-grid :columns="columns" :tree-structure="true" :data-source="goods_category_rows">
          <div slot="op-template" slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">修改</el-button>          
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </div>
      </tree-grid>
      </div>
    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible" width="1000px">
      <el-form class="dialog-form" :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="120px">                 

        <el-row :gutter="20">
          <el-col :span="12">
              <el-form-item label="分类名称" prop="title">                                                        
          <el-input v-model="temp.title" placeholder="不超过20个字符"></el-input>                            
        </el-form-item>         
          </el-col>
          <el-col :span="12">
              <el-form-item label="选择上级分类" prop="parentId">          
                 <el-cascader
                  placeholder="选择上级分类"
                  :options="parentCategories"
                  v-model="temp.parentId"
                  filterable
                  change-on-select
                ></el-cascader>
            
        </el-form-item>         
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
              <el-form-item label="商品类型" prop="typeId">          
            
                
                  <el-select v-model="temp.typeId" placeholder="请选择">
                    <el-option
                      v-for="item in typeIdOptions"
                      :key="item.value"
                      :label="item.text"
                      :value="item.value">
                    </el-option>
                  </el-select>
                
            
        </el-form-item>     
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="sort">          
          <el-input v-model.number="temp.sort" type="number" placeholder="排序"></el-input>
        </el-form-item>         
                         
          </el-col>
        </el-row>
            
        <el-row :gutter="20">
          <el-col :span="12">
              <el-form-item label="分类小图标 (200x200)" prop="thumbImg">          
            
                <el-upload
                  class="avatar-uploader"
                  :action="UPLOAD_URL"
                  :show-file-list="false"                  
                  :on-success="handleAvatarSuccess('thumbImg')"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="temp.thumbImg" :src="temp.thumbImg|absUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>


            
        </el-form-item>         
        
          </el-col>
          <el-col :span="12">
              <el-form-item label="分类大图标 (640x240)" prop="thumbBigImg">          
                  <el-upload
                  class="avatar-uploader"
                  :action="UPLOAD_URL"
                  :show-file-list="false"                  
                  :on-success="handleAvatarSuccess('thumbBigImg')"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="temp.thumbBigImg" :src="temp.thumbBigImg|absUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            
        </el-form-item>         
          </el-col>
        </el-row>

        
        
        <el-row :gutter="20">
          <el-col :span="12">
              <el-form-item label="货号前缀" prop="categoryPrefix">          
            
                                  
                  <el-input v-model="temp.categoryPrefix" placeholder="不超过5个字符"></el-input>
                
            
        </el-form-item>         
          </el-col>
          <el-col :span="12">

            <el-form-item label="URL重写名称" prop="urlAlias">          
            
                                  
                  <el-input v-model="temp.urlAlias" placeholder="请输入URL重写名称"></el-input>
                
            
        </el-form-item>         

          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
              <el-form-item label="搜索标题" prop="searchTitle">          
            
                                  
                  <el-input v-model="temp.searchTitle" placeholder="不超过100个字符"></el-input>
                
            
        </el-form-item>      
          </el-col>
          <el-col :span="12">
              <el-form-item label="搜索关键字" prop="searchKeywords">          
            
                                  
                  <el-input v-model="temp.searchKeywords" placeholder="不超过160个字符"></el-input>
                
            
        </el-form-item>         
          </el-col>
        </el-row>

        
        
        
        
           
        
        
        
        <el-form-item label="搜索描述" prop="searchDesc">          
            
                                  
                  <el-input v-model="temp.searchDesc" placeholder="不超过240个字符"></el-input>
                
            
        </el-form-item>         

        <el-row :gutter="20">
          <el-col :span="12">
              <el-form-item label="分类广告1" prop="ad1">          
            
                                  
                  <el-input v-model="temp.ad1" placeholder="分类广告1"></el-input>
                
            
        </el-form-item>         
          </el-col>
          <el-col :span="12">
            <el-form-item label="分类广告2" prop="ad2">          
            
                                  
                  <el-input v-model="temp.ad2" placeholder="分类广告2"></el-input>
                
            
        </el-form-item>        
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
              <el-form-item label="分类广告3" prop="ad3">          
            
                                  
                  <el-input v-model="temp.ad3" placeholder="分类广告3"></el-input>
                
            
        </el-form-item>         
          </el-col>
          <el-col :span="12">
              <el-form-item label="分类广告4" prop="ad4">          
            
                                  
                  <el-input v-model="temp.ad4" placeholder="分类广告4"></el-input>
                
            
        </el-form-item>      
          </el-col>
        </el-row>
           
        
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { TreeGrid } from "@/components/treeTable";

export default {
  components: {
    TreeGrid
  },
  data() {
    return {
      columns: [
        {
          text: "分类名称",
          dataIndex: "title"
        },
        {
          text: "URL重写名称",
          dataIndex: "urlAlias"
        },
        {
          text: "排序",
          dataIndex: "sort"
        }
      ],
      goods_category_rows: [],
      parentCategories: [
        {
          value: "0",
          label: "root"
        }
      ],
      temp: {
        id: "",

        title: "",

        parentId: [],

        typeId: "",

        thumbImg: "",

        thumbBigImg: "",

        categoryPrefix: "",

        urlAlias: "",

        searchTitle: "",

        searchKeywords: "",

        searchDesc: "",

        ad1: "",

        ad2: "",

        ad3: "",

        ad4: "",

        sort: 0
      },

      typeIdOptions: [],

      rules: {
        title: [
          { required: true, trigger: "change", message: "请输入分类名称" },
          { max: 20, trigger: "change", message: "不超过20个字符" }
        ],

        parentId: [
          { required: true, message: "请选择上级分类", trigger: "change" }
        ],

        typeId: [
          { required: true, message: "请选择商品类型", trigger: "change" }
        ],

        thumbImg: [
          { required: true, message: "请上传分类小图标", trigger: "change" }
        ],

        thumbBigImg: [
          {
            required: true,
            message: "请上传分类大图标 (640x240)不能为空",
            trigger: "change"
          }
        ],
        categoryPrefix: [
          { required: true, message: "货号前缀不能为空", trigger: "change" },
          { max: 5, message: "不超过5个字符", trigger: "change" }
        ],
        urlAlias: [
          { required: true, message: "URL重写名称不能为空", trigger: "change" }
        ],

        searchTitle: [
          { required: true, message: "搜索标题不能为空", trigger: "change" },
          { max: 100, message: "不超过100个字符", trigger: "change" }
        ],

        searchKeywords: [
          { required: true, message: "搜索关键字不能为空", trigger: "change" },
          { max: 160, message: "不超过160个字符", trigger: "change" }
        ],

        searchDesc: [
          { required: true, message: "搜索描述不能为空", trigger: "change" },
          { max: 240, message: "不超过240个字符", trigger: "change" }
        ],
        sort: [{ required: true, message: "排序号不能为空", trigger: "change" }]
      }
    };
  },
  created() {
    this.init("goods_category",1);
    this.combOptions("goods_type").then(info => {
      this.typeIdOptions = info;
    });
    this.$get("/admin/goods_category/allData").then(info => {
      this.goods_category_rows = info;
    });
  },
  methods: {
    __onRowRemoved(){
      this.$get("/admin/goods_category/allData").then(info => {
        this.goods_category_rows = info;
      });      
      return false;
    },
    __onFormSubmited() {
      this.$get("/admin/goods_category/allData").then(info => {
        this.goods_category_rows = info;
      });      
      return false;
    },
    __onHandleUpdate(row) {
      if (row) {
        this.$query("/admin/goods_category/tree").then(info => {
          this.parentCategories = [
            {
              value: "0",
              label: "(顶级分类)"
            }
          ];
          for (let i = 0; i < info.length; i++) {
            let el = info[i];
            if (el.value == row.id) {
              info.splice(i, 1);
              break;
            }
          }
          this.parentCategories.push(...info);
        });
        
        if (typeof row.parentId !== "object") {
          let pidStr = row.path.replace("," + row.id + ",", "").trim(",");
          if (pidStr) {
            row.parentId = pidStr.split(",");
          } else {
            row.parentId = ["0"];
          }
        }
      } else {
        this.$query("/admin/goods_category/tree").then(info => {
          this.parentCategories = [
            {
              value: "0",
              label: "(顶级分类)"
            }
          ];
          this.parentCategories.push(...info);
        });
      }
    },
    __onFormSubmit() {
      if (this.isEditing) {
        // for 编辑
        if (this.temp.parentId[this.temp.parentId.length - 1] == this.temp.id) {
          this.$alert("上级分类不能是它自己");
          return false;
        }
      }
    },
    exportExcelFile() {
      this.exportExcel({
        title: "商品分类",
        fields: [
          { field: "title", title: "分类名称" },

          { field: "parentId", title: "选择上级分类" },

          { field: "goods_typeName", title: "商品类型" },

          { field: "thumbImg", title: "分类小图标 (200x200)" },

          { field: "thumbBigImg", title: "分类大图标 (640x240)" },

          { field: "categoryPrefix", title: "货号前缀" },

          { field: "urlAlias", title: "URL重写名称" },

          { field: "searchTitle", title: "搜索标题" },

          { field: "searchKeywords", title: "搜索关键字" },

          { field: "searchDesc", title: "搜索描述" },

          { field: "ad1", title: "分类广告1" },

          { field: "ad2", title: "分类广告2" },

          { field: "ad3", title: "分类广告3" },

          { field: "ad4", title: "分类广告4" },

          { field: "sort", title: "排序" },

          { field: "createTime", title: "创建时间" },

          { field: "modifyTime", title: "修改时间" },

          { field: "creator", title: "创建人" },

          { field: "modifier", title: "修改人" }
        ]
      }).then(info => {
        this.openWin(info);
      });
    }
  }
};
</script>
